<style type="text/css">
</style>

<!-- include CSS always before including js -->
<link type="text/css" rel="stylesheet" href="modules/POBHotel/pnjavascript/tn3gallery/skins/tn3/tn3.css"></link>
<!-- include jQuery library -->
<!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>-->
<!-- include tn3 plugin -->
<script type="text/javascript" src="modules/POBHotel/pnjavascript/tn3gallery/js/jquery.tn3lite.min.js"></script>

<!--  initialize the TN3 when the DOM is ready -->
<script type="text/javascript">
	$(document).ready(function() {
		//Thumbnailer.config.shaderOpacity = 1;
		var tn1 = $('.mygallery').tn3({
skinDir:"skins",
imageClick:"fullscreen",
image:{
maxZoom:1.5,
crop:true,
clickEvent:"dblclick",
transitions:[{
type:"blinds"
},{
type:"grid"
},{
type:"grid",
duration:460,
easing:"easeInQuad",
gridX:1,
gridY:8,
// flat, diagonal, circle, random
sort:"random",
sortReverse:false,
diagonalStart:"bl",
// fade, scale
method:"scale",
partDuration:360,
partEasing:"easeOutSine",
partDirection:"left"
}]
}
		});
	});
</script>
	<h1>Gallery</h1>
    <div id="content">
    <div class="mygallery">
      <div class="tn3 album">
          <h4>Fixed Dimensions</h4>
          <div class="tn3 description">Images with fixed dimensions</div>
          <div class="tn3 thumb">images/35x35/1.jpg</div>
          <ol>
            <!--[foreach from=$objectArray item=item name=foo]-->
            <li>
              <h4><!--[sitename]--></h4>
              <div class="tn3 description"><!--[slogan]--></div>
              <a href="<!--[$item.filepath]--><!--[$item.filename]-->">
                <img src="<!--[$item.thumbpath]--><!--[$item.thumbname]-->" />
              </a>
            </li>
            <!--[/foreach]-->
          </ol>
      </div>
    </div>
</div>




